<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Template-Backend</title>

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- MetisMenu CSS -->
    <link href="js/plugins/metisMenu/metisMenu.min.css" rel="stylesheet">
    <link href="js/plugins/metisMenu/sb-admin-2.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">

    <!-- Custom CSS -->
    <style>
    body {
        padding-top: 70px;
        /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
    }

    .list-group-item-aaa {
        background-color: red;

    }
    </style>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>
    <!-- Navigation -->
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Start Bootstrap</a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li>
                        <a href="#">About</a>
                    </li>
                    <li>
                        <a href="#">Services</a>
                    </li>
                    <li>
                        <a href="#" data-toggle="modal" data-target="#myModal" >Contact</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->

        <div class="navbar-default sidebar" role="navigation">
            <div class="sidebar-nav navbar-collapse">
                <ul class="nav" id="side-menu">
                    <li class="sidebar-search">
                        <div class="input-group custom-search-form">
                            <input type="text" class="form-control" placeholder="Search...">
                            <span class="input-group-btn">
                            <button class="btn btn-default" type="button">
                                <i class="fa fa-search"></i>
                            </button>
                        </span>
                        </div>
                        <!-- /input-group -->
                    </li>
                    <li>
                        <a class="active" href="index.html"><i class="fa fa-dashboard fa-fw"></i> Dashboard</a>
                    </li>
                    <li>
                        <a href="#">Charts<span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level">
                            <li>
                                <a href="flot.html">Flot Charts</a>
                            </li>
                            <li>
                                <a href="morris.html">Morris.js Charts</a>
                            </li>
                        </ul>
                        <!-- /.nav-second-level -->
                    </li>
                    <li>
                        <a href="#">Charts<span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level">
                            <li>
                                <a href="flot.html">Flot Charts</a>
                            </li>
                            <li>
                                <a href="morris.html">Morris.js Charts</a>
                            </li>
                        </ul>
                        <!-- /.nav-second-level -->
                    </li>
                    
                </ul>
            </div>
            <!-- /.sidebar-collapse -->
        </div>
        <!-- /.navbar-static-side -->
          
    </nav>

    <!--PageContent-->
    <div id="page-wrapper">
        <div class="row">
            <div class="col-lg-12">
                <h1 class="page-header">Tables</h1>
            </div>
            <!-- /.col-lg-12 -->
        </div>
        <div class="row">
           <div class="col-md-12">
    <!--PageContent-divider-->

                <!--tableBlock-->
                <div class="panel panel-default">
                    <div class="panel-heading">
                        DataTables Advanced Tables
                    </div>
                    <div class="panel-body">

                        <div class="">
                            <span class="pull-right">search: <input type="text" valule=""></span>
                        </div>
                        <hr/>
                        <div class="table-responsive">
                            <table class="table table-striped table-bordered table-hover" id="dataTables-example">
                                <thead>
                <!--tableBlock-divider1-->
                                    <tr>
                                        <!--tableBlock-divider1-child-->
                                        <th>[[fieldName]]</th>
                                        <!--/tableBlock-divider1-child-->
                                        <th>Browser</th>
                                        <th>Platform(s)</th>
                                        <th>Engine version</th>
                                        <th>CSS grade</th>
               
                                    </tr>
                <!--/tableBlock-divider1-->
                                </thead>
                                <tbody>
                <!--tableBlock-divider2--> 
                                    <!--tableBlock-divider2-child-->
                                    <tr class="gradeC">
                                    <!--tableBlock-divider2-child-divider-->

                                        <!--tableBlock-divider2-child-divider-child-->
                                        <td>Misc</td>
                                        <!--/tableBlock-divider2-child-divider-child-->
                                        <td>IE Mobile</td>
                                        <td>Windows Mobile 6</td>
                                        <td>-</td>
                                        <td>C</td>
                                    <!--/tableBlock-divider2-child-divider-->
                                    </tr>
                                    <!--/tableBlock-divider2-child-->
                                    <tr class="gradeC">
                                        <td>Misc</td>
                                        <td>PSP browser</td>
                                        <td>PSP</td>
                                        <td class="center">-</td>
                                        <td class="center">C</td>
                                    </tr>
                                    <tr class="gradeU">
                                        <td>Other browsers</td>
                                        <td>All others</td>
                                        <td>-</td>
                                        <td class="center">-</td>
                                        <td class="center">U</td>
                                    </tr>
                <!--/tableBlock-divider2-->
                                </tbody>
                            </table>
                        </div>
                        <!-- /.table-responsive -->
                        <nav class="pull-right">
                          <ul class="pagination">
                            <li>
                              <a href="#" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                              </a>
                            </li>
                            <li><a href="#">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li>
                              <a href="#" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                              </a>
                            </li>
                          </ul>
                        </nav> 

                    </div>
                    <!-- /.panel-body -->
                </div>
                <!--/tableBlock-->

                <!--formBlock-->
                <div class="panel panel-default">
                    <div class="panel-heading">
                        Basic Form Elements
                    </div>
                    <!-- /.panel-heading -->
                    <div class="panel-body">

                        <div class="row">
                            <div class="col-lg-8">
                                <form action="" method="post" accept-charset="utf-8" role="form">
                <!--formBlock-divider-->
                                    <!--textInput-->
                                    <div class="form-group">
                                        <label>[[fieldName]]</label>
                                        <input class="form-control" name="[[fieldName]]" value="" placeholder="Enter text">
                                    </div>
                                    <!--/textInput-->
                                    <!--textInput1-->
                                    <div class="form-group">
                                        <label>[[fieldName]]</label>
                                        <input class="form-control" name="[[fieldName]]" value="" >
                                        <p class="help-block">Example block-level help text here.</p>
                                    </div>
                                    <!--/textInput1-->
                                    <!--staticControl-->
                                    <div class="form-group">
                                        <label>Static Control</label>
                                        <p class="form-control-static">[[staticText]]email@example.com</p>

                                    </div>
                                    <!--/staticControl-->
                                    <!--fileInput-->
                                    <div class="form-group">
                                        <label>File input</label>
                                        <input type="file">
                                    </div>
                                    <!--/fileInput-->
                                    <!--textArea-->
                                    <div class="form-group">
                                        <label>[[fieldName]]</label>
                                        <textarea class="form-control" name="[[fieldName]]" rows="3"></textarea>
                                    </div>
                                    <!--/textArea-->
                                    <!--checkBox-->
                                    <div class="form-group">
                                        <label>[[fieldName0]]</label>
                                    <!--checkBox-divider-->

                                        <!--checkBox-child-->
                                        <div class="checkbox">
                                            <label>
                                                <input type="checkbox" name="[[fieldName]]" value="">[[fieldName]]
                                            </label>
                                        </div>
                                        <!--/checkBox-child-->
                                        <div class="checkbox">
                                            <label>
                                                <input type="checkbox" value="">Checkbox 2
                                            </label>
                                        </div>
                                        <div class="checkbox">
                                            <label>
                                                <input type="checkbox" value="">Checkbox 3
                                            </label>
                                        </div>
                                    <!--checkBox-divider-->
                                    </div>
                                    <!--/checkBox-->
                                    <!--inlineCheckBox-->
                                    <div class="form-group">
                                        <label>[[fieldName0]]</label>
                                    <!--inlineCheckBox-divider-->

                                        
                                        <!--inlineCheckBox-child-->
                                        <label class="checkbox-inline">
                                            <input type="checkbox" name="[[fieldName]]" value="" >[[fieldName]]
                                        </label>
                                        <!--/inlineCheckBox-child-->

                                        <label class="checkbox-inline">
                                            <input type="checkbox">2
                                        </label>
                                        <label class="checkbox-inline">
                                            <input type="checkbox">3
                                        </label>
                                    <!--/inlineCheckBox-divider-->
                                    </div>
                                    <!--/inlineCheckBox-->

                                    <!--radio-->
                                    <div class="form-group">
                                        <label>[[fieldName]]</label>
                                    <!--radio-divider-->

                                        <!--radio-child-->
                                        <div class="radio">
                                            <label>
                                                <input type="radio" name="[[fieldName]]" id="" value="" >Radio 1
                                            </label>
                                        </div>
                                        <!--/radio-child-->

                                        <div class="radio">
                                            <label>
                                                <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"checked>Radio 2
                                            </label>
                                        </div>
                                        <div class="radio">
                                            <label>
                                                <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3">Radio 3
                                            </label>
                                        </div>
                                    <!--/radio-divider-->
                                    </div>
                                    <!--/radio-->

                                    <!--inlineRadio-->
                                    <div class="form-group">
                                        <label>[[fieldName]]</label>
                                    <!--inlineRadio-divider-->

                                        <!--inlineRadio-child-->
                                        <label class="radio-inline">
                                            <input type="radio" name="[[fieldName]]" id="" value="" >1
                                        </label>
                                        <!--/inlineRadio-child-->

                                        <label class="radio-inline">
                                            <input type="radio" name="optionsRadiosInline" id="optionsRadiosInline2" value="option2" checked>2
                                        </label>
                                        <label class="radio-inline">
                                            <input type="radio" name="optionsRadiosInline" id="optionsRadiosInline3" value="option3">3
                                        </label>
                                    <!--inlineRadio-divider-->
                                    </div>
                                    <!--inlineRadio-->

                                    <!--select-->
                                    <div class="form-group">
                                        <label>[[fieldName]]</label>
                                        <select name="[[fieldName]]" class="form-control">
                                    <!--select-divider-->
                                            <!--select-child-->
                                            <option value="[[optionVal]]">[[optionTitle]]</option>
                                            <!--/select-child-->
                                            <option>2</option>
                                            <option>3</option>
                                            <option>4</option>
                                            <option>5</option>
                                    <!--/select-divider-->
                                        </select>
                                    </div>
                                    <!--/select-->

                                    <!--multipleSelect-->
                                    <div class="form-group">
                                        <label>Multiple Selects</label>
                                        <select multiple class="form-control">
                                            <option>1</option>
                                            <option>2</option>
                                            <option>3</option>
                                            <option>4</option>
                                            <option>5</option>
                                        </select>
                                    </div>
                                    <!--/multipleSelect-->

                <!--/formBlock-divider-->

                                    <button type="submit" class="btn btn-default">Submit Button</button>
                                    <button type="reset" class="btn btn-default">Reset Button</button>
                                </form>
                            </div>
                        </div>

                    </div>
                </div>
                <!--/formBlock-->

    <!--/PageContent-divider-->
           </div> 
        </div>

    </div> 
    <!--/PageContent-->


    <!-- jQuery Version 1.11.0 -->
    <script src="js/jquery-1.11.0.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>

    <!-- Metis Menu Plugin JavaScript -->
    <script src="js/plugins/metisMenu/metisMenu.min.js"></script>
    <script src="js/plugins/metisMenu/sb-admin-2.js"></script>


</body>

</html>
